<template>
  <div class="page-wrap" style="height:100vh;">
    <mt-header fixed :title="$t('open_account')">
      <router-link to="/" slot="left"><mt-button icon="back"></mt-button></router-link>
    </mt-header>
    <div class="login-content">
      <div class="title">{{$t('reg_account')}}</div>
      <div class="" style="padding: 0 15px;">
        <mt-field class="input-wrap" :placeholder="$t('input_account')" v-model="param.username"></mt-field>
        <mt-field class="input-wrap" :placeholder="$t('input_mobile') " type="number" v-model="param.mobile"></mt-field>
        <mt-field class="input-wrap" :placeholder="$t('input_code') " type="number" v-model="param.code">
          <mt-button class="code-btn" size="large" @click="getCode" v-if="!countdown">
            {{$t('get_verification_code')}}
          </mt-button>
          <mt-button class="code-btn" size="large" disabled v-else>
            {{ countdown }} 秒后重新获取
          </mt-button>
        </mt-field>
        <mt-field class="input-wrap" :placeholder="$t('input_password')" type="password"
          v-model="param.password"></mt-field>
        <mt-field class="input-wrap" :placeholder="$t('input_Referral_Code')" v-model="param.invite"></mt-field>
        <div style="padding:.375rem 0;width:100%;display:flex;justify-content: center;align-items: center;"><mt-button
            class="reg-btn" size="large" @click="Submission()">{{$t('open_account')}}</mt-button></div>
      </div>
      <div class="foot">
        <div class="deal">
          <!-- <input type="checkbox" v-model="remember" /> -->
          <mt-checklist v-model="remember" :options="['']" @change="getDealChecked">
          </mt-checklist>
          <label> {{$t('agree_text')}}</label>
          <router-link :to="{ path: 'dealText', query: { id: 1 }}">{{$t('Software_Usage_Agreement')}}</router-link>
          <router-link :to="{ path: 'dealText', query: { id: 2 }}">{{$t('Privacy_Policy')}}</router-link>
        </div>
        <div class="logincla" @click="offlog"> <span>{{$t('acount_is')}}</span>{{$t('login_now')}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        countdown: 0, // 倒计时时间
        timer: null, // 计时器
        param: {
          mobile: '',
          username: '', //用户名
          code: '',
          password: '', //密码
          invite: '',
        },
        remember: [],
        isChecked: false
      };
    },
    methods: {
      getDealChecked(e) {
        console.log(e[0])
        // console.log(this.password)
        if (e[0] == '') {
          this.isChecked = true;
        } else {
          this.isChecked = false;
        }
      },
      startCountdown() {
        this.countdown = 60; // 设置倒计时时间，如60秒
        this.timer = setInterval(() => {
          if (this.countdown > 0) {
            this.countdown -= 1;
          } else {
            clearInterval(this.timer);
          }
        }, 1000);
      },
      getCode() {
        //获取验证码
        var that = this;

        if (!that.param.mobile || that.param.mobile.length != 11) {
          return this.$layer.msg(that.$t('请正确输入手机号'));
        }
        let param = {}
        param.mobile = that.param.mobile;
        param.usage = 'register';
        this.$post('v1/site/sms-code', param).then(res => {
          console.log(res);
          if (res.code == 200) {
            that.$layer.msg(that.$t(res.message));
            this.startCountdown();
          } else {
            that.$layer.msg(res.message);
          }
        });
      },
      Submission() {
        console.log()
        //提交
        var that = this;
        if (that.param.username == '') {
          return this.$layer.msg(that.$t('must_input_account'));
        }
        if (!that.param.mobile || that.param.mobile.length != 11) {
          return this.$layer.msg(that.$t('请正确输入手机号'));
        }
        if (that.param.code == '') {
          return this.$layer.msg(that.$t('请输入验证码'));
        }
        if (that.param.password.length < 6) {
          return this.$layer.msg(that.$t('at_least_6_password'));
        }
        if (!that.param.invite) {
          return this.$layer.msg(that.$t('请输入邀请码'));
        }
        if (!that.isChecked) {
          return this.$layer.msg(that.$t('请同意阅读协议'));
        }
        this.$post('v1/site/register', this.param).then(res => {
          // console.log(res);
          if (res.code == 200) {
            that.$layer.msg(that.$t('open_account_succeed'));
            that.param.mobile = '';
            that.param.username = '';
            that.param.code = '';
            that.param.password = '';
            that.param.invite = '';
            that.$router.push({
              path: '/login'
            });
          } else {
            that.$layer.msg(res.message);
          }
        });
      },
      offlog() {
        var that = this;
        that.$router.push({
          path: '/login'
        });
      }
    }
  };
</script>

<style scoped>
  .mint-header{
    background-color: #000;
    color: #fff;
  }
  /deep/ .deal .mint-cell-wrapper {
    padding: 0;
  }

  /deep/ .deal .mint-checklist-label {
    padding: 0;
  }

  /deep/ .mint-checkbox-input:checked+.mint-checkbox-core {
    background-color: #158F9B;
    border-color: #158F9B;
  }

  .foot {
    background-color: #fff;
    width: 100%;
    padding-bottom: 30px;
    border-radius: 0 0 .25rem .25rem;
  }

  .foot .deal {
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .foot .deal label {
    color: #000;
    font-size: .35rem;
    font-weight: bold;
    padding-left: .0625rem;
    position: relative;
    top: .1rem;
  }

  .foot .deal a {
    text-decoration: none;
    color: #118d97;
    font-size: .3rem;
    position: relative;
    top: .1rem;
  }

  .page-wrap {
    background: url(../assets/login-bg.png) no-repeat center center;
    height: 100vh;
    width: 100%;
    background-size: 100% 100%;
  }

  .login-content {
    width: 8.25rem;
    margin: 2rem auto;
    background: #fff;
    border-radius: .25rem;

  }

  .login-content .title {
    width: 100%;
    height: 1.2rem;
    background: #14909A;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .375rem;
    color: #fff;
    border-radius: .25rem .25rem 0 0;
  }

  .code-btn {
    background: #158F9B;
    font-size: .3rem;
    color: #fff;
    height: .7rem;
    padding: 0 .25rem;
  }

  /deep/ .mint-cell-wrapper {
    background: #fff;
  }

  /deep/ .mint-field-core {
    background: #fff;
  }

  .reg-btn {
    width: 6.625rem;
    height: .875rem;
    background: #158F9B;
    font-size: .3rem;
    color: #fff;
    border-radius: .5rem;
  }

  .mint-cell-wrapper {
    background: red;
  }

  .mint-cell {
    margin-top: 0.2rem !important;
  }

  .mint-button--primary {
    margin-top: 1rem;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;

    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #b3282b;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 8rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    border: 1px solid #ccc;
  }

  .avatar {
    width: 8rem;
    height: 4rem;
    /* background: red; */
    display: block;
  }

  .logincla {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .325rem;
    color: #118d97;
    text-decoration: none;
    background: #fff;
    padding: .25rem 0;
    font-weight: bold;
  }

  .logincla span {
    font-size: .325rem;
    color: #000;
    font-weight: bold;
  }

  .mint-header {
    /* background: #b3282b; */
  }
</style>
